<template>
	<div id="VisualEditing">
		<div v-if="isNext">
			<div class="experiment">
				<v-editstep :flagData="0"></v-editstep>
				<div class="experiment-ipt">
					<div class="experiment-name-left">实验名称</div>
					<el-input class="width240"></el-input>
				</div>
				<div class="experiment-ipt">
					<div class='experiment-name-left'>实验描述</div>
					<el-input class="width240"></el-input>
				</div>
				<div class="experiment-ipt">
					<div class="experiment-name-left">URL</div>
					<el-input class="width240"></el-input>
				</div>
				<div class="experiment-ipt">
					<div class="experiment-name-left">流量分配</div>
					<div style="width:90px">
						<el-slider v-model="value1" :show-tooltip="false"></el-slider>
					</div>
				</div>
				<div class="experiment-ipt">
					<div class="experiment-name-left">实验周期</div>
					<div class="marRight">
						<el-date-picker
              v-model="DateValBegin"
              type="date"
              placeholder="选择日期"
              size="mini">
						</el-date-picker>
					</div>
					<div class="marRight">
						<el-time-select
						v-model="TimeValBegin"
						:picker-options="{start: '08:30',step: '00:15',end: '18:30'}"
						size="mini">
						</el-time-select>
					</div>
					<div class="marRight">
						<el-date-picker
						v-model="DateValEnd"
						type="date"
						placeholder="选择日期"
						size="mini">
            </el-date-picker>
					</div>
					<div class="marRight">
						<el-time-select
						v-model="TimeValEnd"
						:picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder=""
            size="mini">
						</el-time-select>
					</div>
					<span class="end">结束</span>
				</div>
				<button class="next" @click='nextClick()' style="margin-bottom:88px">下一步</button>
			</div>
		</div>
		<tab-first :is="currentView" keep-alive v-else ></tab-first>
	</div>

</template>

<script type="text/ecmascript-6">
  import { VEditstep } from '../../../../components'
  import VisualEdit from '../../AandB/tabsComp/VisualEdit'
  export default {
    components: {
      VEditstep,
      VisualEdit
    },
    data () {
      return {
        value1: 50,
        TimeValEnd: '00:00',
        currentView: 'VisualEdit',
        isNext: true,
        TimeValBegin: '00:00',
        DateValBegin: '2018-01-01', // 开始时间
        DateValEnd: '2018-01-01' // 结束时间
      }
    },
    methods: {
      formatTooltip (val) {
        return val / 100
      },
      nextClick () {
        this.isNext = false
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
#VisualEditing
	.experiment
		.experiment-ipt
			display:flex
			font-size:16px
			align-items: center
			margin-bottom:10px
			.experiment-name-left
				color:#5A5E66
				font-size:12px
				width:50px
				margin-right:10px
	.el-date-editor
		width:140px !important
	.marRight
		margin-right:10px
	.end
		font-size:12px
		color:#5A5E66
	.next
		background:#016DFB
		color:#fff
		font-size:12px
		border-radius:4px
		width:110px
		height:36px
		border:none
		display:block
		margin: 40px auto 0 auto
		outline:none
</style>
